import React, { Component } from 'react'
import './live.scss'
import { Pagination , Carousel } from 'antd';
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiLiveBanner , getApiLiveList  , getApinListsClass , getApiReserveLists , getApiBackLists } from "../../axios/api"
import { get } from '../../axios/localstorage';

export default class live extends Component {

    state = {
        banner:[],

        typeList:[],

        classList:[],
        classList1:[],
        classList2:[],
        classList3:[],

        page:1,
        total:1,
        page1:1,
        total1:1,
        page2:1,
        total2:1,
        page3:1,
        total3:1,

        type1:"",
        type2:"",
        type3:"",

        currentIndex:0,

        typeArr:[],
        type:'',
        time:'',
        price:'',
        format:'',
        timeArr:[],
        priceArr:[],
        formatArr:[],
        second:'',
        third:'',
        secondType:'',
        thirdType:'',
    }

    componentWillMount(){
        getApiLiveBanner({
            token:get('token'),
            type:get('type')?get('type'):0,
        })
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    banner:req.data.data
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        this.getLists();
        this.getReserve();
        this.getBack();

    }

    componentDidMount(){
        window.scroll(0,0);
    }

    

    getBack=()=>{
        setTimeout(()=>{
            let param = {
                // type_id:this.state.type1,
                city:get('city'),
                type:get('type')?get('type'):0,
                content:get('city')?get('city'):get('mechanism'),
                page:this.state.page3,
                token:get('token')
            }

            getApiBackLists(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList3:data,
                        // total3:data.total
                    })
                }
            }).catch( err =>{
                console.error(err);
            })
        },30)
    }
    getLists=()=>{
        setTimeout(()=>{
            let param = {
                type_id:this.state.type1,
                city:get('city'),
                type:get('type')?get('type'):0,
                content:get('city')?get('city'):get('mechanism'),
                page:this.state.page1,
            }

            getApinListsClass(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList1:data.list,
                        total1:data.total
                    })
                }
            }).catch( err =>{
                console.error(err);
            })
        },30)
    }

    getReserve=()=>{
        setTimeout(()=>{
            let param = {
                type_id:this.state.type2,
                city:get('city'),
                type:get('type')?get('type'):0,
                content:get('city')?get('city'):get('mechanism'),
                page:this.state.page2,
            }

            getApiReserveLists(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList2:data.list,
                        total2:data.total
                    })
                }
            }).catch( err =>{
                console.error(err);
            })
        },30)
    }
    
    getData=(page)=>{
        setTimeout(()=>{
            let param = {
                token:get('token'),
                type:this.state.type,
                time:this.state.time,
                price:this.state.price,
                format:this.state.format,
                page:page?page:1
            }

            getApiLiveList(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList:data.list,
                        total:data.total
                    })
                }
            }).catch( err =>{
                console.error(err);
            })

        },50)
    }
    
    gotoSlide=(num)=>{
        this.refs['bslide'].goTo(num);
    }

    gotoUrl=(item)=>{
        console.log(item);
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage1=(page)=>{
        this.setState({
            page1:page
        })
        this.getLists();
    }

    changePage2=(page)=>{
        this.setState({
            page2:page
        })
        this.getReserve();
    }
    changePage3=(page)=>{
        this.setState({
            page3:page
        })
        this.getBack();
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/liveinfo?id='+id);
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoChooseType=(item)=>{
        this.setState({type:item.id});this.getData();
        if(item.child){
            if(item.child.length > 0){
                this.setState({
                    second:item,
                    third:''
                })
            }else{
                this.setState({
                    second:'',
                    third:''
                })
            }
        }else{
            this.setState({
                second:'',
                third:''
            }) 
        }
    }

    gotoChooseSecondType=(item)=>{
        this.setState({secondType:item.id});
        let param = {
            token:get('token'),
            type:item.id,
            time:this.state.time,
            price:this.state.price,
            format:this.state.format,
        }

        getApiLiveList(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    classList:data.list,
                    total:data.total
                })
            }
        }).catch( err =>{
            console.error(err);
        })
        if(item.child.length > 0){
            this.setState({
                third:item
            })
        }else{
            this.setState({
                third:''
            })
        }
    }
    gotoChooseThirdType=(item)=>{
        this.setState({thirdType:item.id});
        let param = {
            token:get('token'),
            type:item.id,
            time:this.state.time,
            price:this.state.price,
            format:this.state.format,
        }

        getApiLiveList(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    classList:data.list,
                    total:data.total
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    render() {
        return (
            <div className="live">
                <Header />
                <div className='bannerBox'>
                    <div className='banner'>
                        <Carousel ref="bslide" dots={false} draggable={true} afterChange={(index)=>{this.onChange(index)}} autoplay={true} autoplaySpeed={3000}>
                            {
                                this.state.banner.map((item,index)=>{
                                    return <div className='item' key={index}>
                                                <div className="bg" style={{backgroundImage:"url('"+item.image+"')"}}></div>
                                            </div>
                                })
                            }
                        </Carousel>
                    </div>
                </div>

                <div hidden>
                    <div className='page1'>
                        <div className='pm'>
                            <div className='phead'>
                                <img alt="" src="assets/img/live.png" className='img1' />
                                <img alt="" src="assets/img/zhengzaizhibp.png" className='img2' />
                                {
                                    this.state.typeList.map((item,index)=>{
                                        return <div className={this.state.type1 === item.id?'phi pchosen':"phi"} onClick={()=>{this.setState({type1:item.id});this.getLists()}}>
                                                    <h2>{item.title}</h2>
                                                    <div className='cen'>
                                                        <span></span>
                                                    </div>
                                                </div>
                                    })
                                }
                            </div>
                            <div className='plist'>
                                <div className="none" hidden={this.state.total1 !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类课程</p>
                                </div>
                                <div className="box" hidden={this.state.total1 === 0}>
                                    {
                                        this.state.classList1.map((item,index)=>{
                                            return <div className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.id)}}>
                                                        <div className="itop" style={{backgroundImage:"url('"+item.thumb+"')"}}>
                                                            <div className="imark" >
                                                                <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                            </div>
                                                            <div className="ido" hidden={item.is_open !== 1}>
                                                                <img alt="" src="assets/imgs/do.gif" />
                                                                <p>正在直播中</p>
                                                            </div>
                                                        </div>
                                                        <div className="ibom" onClick={(ev)=>{ev.stopPropagation()}}>
                                                            <h2>{item.title}</h2>
                                                            <p onClick={()=>{this.gotoPage('/school?isLive=1&id='+item.sid)}}>{item.stitle}</p>
                                                            <p onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+item.teacher_id)}}>{item.name}老师</p>
                                                            <div className="idiv">
                                                                <div><img alt="" src="assets/imgs/shijian.png" /> {item.start_time}</div>
                                                                <h4>{item.sale_num?item.sale_num:0}人参加</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                <div className='r_page' hidden={this.state.total1 === 0}>
                                    <Pagination type="primary" showSizeChanger={false} pageSize={8}  defaultCurrent={this.state.page1} total={this.state.total1} onChange={(page)=>{this.changePage1(page)}} />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className='page2'>
                        <div className='pm'>
                            <div className='phead'>
                                <img alt="" src="assets/img/order.png" className='img1' />
                                <img alt="" src="assets/img/yuyuezhibo.png" className='img2' />
                                {
                                    this.state.typeList.map((item,index)=>{
                                        return <div className={this.state.type2 === item.id?'phi pchosen':"phi"} onClick={()=>{this.setState({type2:item.id});this.getReserve()}}>
                                                    <h2>{item.title}</h2>
                                                    <div className='cen'>
                                                        <span></span>
                                                    </div>
                                                </div>
                                    })
                                }
                            </div>

                            <div className="none" hidden={this.state.total2 !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无此类课程</p>
                            </div>

                            <div className='pbox'>
                                {
                                    this.state.classList2.map((item,index)=>{

                                        return <div className="item" hidden={index > 3} key={index} onClick={()=>{this.gotoPage('/liveinfo?id='+item.id)}}>
                                                    <div className="itop" style={{backgroundImage:"url('"+item.thumb+"')"}}>
                                                        <div className="imark" >
                                                            <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                        </div>
                                                        <div className='is'>预约直播</div>
                                                    </div>
                                                    <div className="ibom" onClick={(ev)=>{ev.stopPropagation()}}>
                                                        <h2>{item.title}</h2>
                                                        <p onClick={()=>{this.gotoPage('/school?isLive=1&id='+item.sid)}}>{item.stitle}</p>
                                                        <p onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+item.teacher_id)}}>{item.name}老师</p>
                                                        <div className='idiv'>
                                                            <img alt="" src="assets/imgs/shijian.png" />
                                                            <h4>{item.start_time?item.start_time+"开始":"暂未设置开始时间"}</h4>
                                                            <div>{item.sale_num?item.sale_num:0}人参加</div>
                                                        </div>
                                                    </div>
                                                </div>

                                    })
                                }
                            </div>

                            <div className='r_page' hidden={this.state.total2 === 0}>
                                <Pagination type="primary" showSizeChanger={false} pageSize={4}  defaultCurrent={this.state.page2} total={this.state.total2} onChange={(page)=>{this.changePage2(page)}} />
                            </div>
                        </div>
                    </div>

                    <div className='page3' hidden>
                        <div className='pm'>
                            <div className='phead'>
                                <img alt="" src="assets/img/back.png" className='img1' />
                                <img alt="" src="assets/img/jingcaihuifnag.png" className='img2' />
                            </div>

                            <div className="none" hidden={this.state.total3 !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类课程</p>
                                </div>
                            <div className='box'>

                                {
                                    this.state.classList3.map((item,index)=>{

                                        return <div className="item" hidden={index > 5} key={index} onClick={()=>{window.open(item.watch_url)}}>
                                                    <div className="itop" style={{backgroundImage:"url('"+item.cover_url+"')"}}>
                                                        {/* <h2>{item.name}</h2> */}
                                                    </div>
                                                    <div className="ibom" onClick={(ev)=>{ev.stopPropagation()}}>
                                                        <h2>{item.name}</h2>
                                                        <p onClick={()=>{this.gotoPage('/school?isLive=1&id='+item.sid)}}>{item.stitle}</p>
                                                        <p onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+item.teacher_id)}}>{item.tname}老师</p>
                                                    </div>
                                                </div>

                                    })
                                }
                            </div>
                            <div className='r_page' hidden={this.state.total3 === 0}>
                                <Pagination type="primary" showSizeChanger={false} pageSize={6}  defaultCurrent={this.state.page3} total={this.state.total3} onChange={(page)=>{this.changePage3(page)}} />
                            </div>
                        </div>
                    </div>

                </div>

                <div>
                    <div className='page4'>
                        <div className='pm'>
                            <div className='nameBox'>
                                <div className='name'>
                                    <img alt="" src="assets/img/zhengzaizhibp.png" className='nimg' />
                                    <span></span>
                                    <div className='imgBox'>
                                        <img alt="" src="assets/img/livebroadcasting.png" />
                                    </div>
                                </div>
                            </div>
                            <div className='plist'>
                                <div className="none" hidden={this.state.total1 !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类课程</p>
                                </div>
                                <div className="box" hidden={this.state.total1 === 0}>
                                    {
                                        this.state.classList1.map((item,index)=>{
                                            return <div className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.id)}}>
                                                        <div className="itop" style={{backgroundImage:"url('"+item.thumb+"')"}}>
                                                            <div className="imark" >
                                                                <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                            </div>
                                                            <div className="ido" hidden={item.is_open !== 1}>
                                                                <img alt="" src="assets/imgs/do.gif" />
                                                                <p>正在直播中</p>
                                                            </div>
                                                        </div>
                                                        <div className="ibom" onClick={(ev)=>{ev.stopPropagation()}}>
                                                            <h2>{item.title}</h2>
                                                            <p onClick={()=>{this.gotoPage('/school?isLive=1&id='+item.sid)}}>{item.stitle}</p>
                                                            <p onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+item.teacher_id)}}>{item.name}老师</p>
                                                            <div className="idiv">
                                                                <div><img alt="" src="assets/imgs/shijian.png" /> {item.start_time}</div>
                                                                <h4>{item.nums}人参加</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                <div className='r_page' hidden={this.state.total1 === 0}>
                                    <Pagination type="primary" showSizeChanger={false} pageSize={8}  defaultCurrent={this.state.page1} total={this.state.total1} onChange={(page)=>{this.changePage1(page)}} />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className='page2'>
                        <div className='pm'>
                            <div className='nameBox'>
                                <div className='name'>
                                    <img alt="" src="assets/img/yuyuezhibo.png" className='nimg' />
                                    <span></span>
                                    <div className='imgBox'>
                                        <img alt="" src="assets/img/bookinglivebroadcast.png" />
                                    </div>
                                </div>
                            </div>

                            <div className="none" hidden={this.state.total2 !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类课程</p>
                                </div>

                            <div className='pbox'>
                                {
                                    this.state.classList2.map((item,index)=>{

                                        return <div className="item" hidden={index > 3} key={index} onClick={()=>{this.gotoPage('/liveinfo?id='+item.id)}}>
                                                    <div className="itop" style={{backgroundImage:"url('"+item.thumb+"')"}}>
                                                        <div className='is'>预约直播</div>
                                                        <div className="imark" >
                                                                <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                            </div>
                                                    </div>
                                                    <div className="ibom" onClick={(ev)=>{ev.stopPropagation()}}>
                                                        <h2>{item.title}</h2>
                                                        <p onClick={()=>{this.gotoPage('/school?isLive=1&id='+item.sid)}}>{item.stitle}</p>
                                                        <p onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+item.teacher_id)}}>{item.name}老师</p>
                                                        <div className='idiv'>
                                                            <img alt="" src="assets/imgs/shijian.png" />
                                                            <h4>{item.start_time?item.start_time+"开始":"暂未设置开始时间"}</h4>
                                                            <div>{item.nums}人参加</div>
                                                        </div>
                                                    </div>
                                                </div>

                                    })
                                }
                            </div>

                            <div className='r_page' hidden={this.state.total2 === 0}>
                                <Pagination type="primary" showSizeChanger={false} pageSize={4}  defaultCurrent={this.state.page2} total={this.state.total2} onChange={(page)=>{this.changePage2(page)}} />
                            </div>
                        </div>
                    </div>

                    <div className='page5'>
                        <div className='pm'>
                            <div className='nameBox'>
                                <div className='name'>
                                    <img alt="" src="assets/img/jingcaihuifnag.png" className='nimg' />
                                    <span></span>
                                    <div className='imgBox'>
                                        <img alt="" src="assets/img/wonderfulplayback.png" />
                                    </div>
                                </div>
                            </div>

                            <div className="none" hidden={this.state.total3 !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类课程</p>
                                </div>
                            <div className='box'>

                                {
                                    this.state.classList3.map((item,index)=>{

                                        return <div className="item" key={index}>
                                                    <div className="itop">
                                                        <video poster={item.image_text} src={item.file_path} controls></video>
                                                    </div>
                                                    <div className="ibom" onClick={(ev)=>{ev.stopPropagation()}}>
                                                        <h2>{item.live_info.title}</h2>
                                                        <p onClick={()=>{this.gotoPage('/school?isLive=1&id='+item.school_info.id)}}>{item.school_info.title}</p>
                                                        <p onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+item.teacher_info.id)}}>{item.teacher_info.name}老师</p>
                                                    </div>
                                                </div>

                                    })
                                }
                            </div>
                            <div className='r_page' hidden>
                                <Pagination type="primary" showSizeChanger={false} pageSize={6}  defaultCurrent={this.state.page3} total={this.state.total3} onChange={(page)=>{this.changePage3(page)}} />
                            </div>
                        </div>
                    </div>

                </div>
                
                <Footer />
            </div>
        )
    }
}
